import { Button, Cascader, Checkbox, Form, Input, App, Popconfirm, Radio } from 'antd'
import CITY from '@/utils/city.json'
import FormUploadImg from '@/components/FormUploadImg'
import './SubMerchantDetails.less'
import { useEffect, useState } from 'react'
import { useModel, useSearchParams } from '@umijs/max'

const SubMerchantDetails = () => {
  const { GetMerchantInfo, CreateSubShop, UpdateSubShop } = useModel('SubMerchant')
  const { message } = App.useApp()

  const [addAndEditFormRef] = Form.useForm()
  const [searchParams] = useSearchParams()

  const [currentId, setCurrentId] = useState(null) // 当前 id
  const [currentType, setCurrentType] = useState(null) // 当前 type

  useEffect(() => {
    let id = searchParams.get('id')
    let type = searchParams.get('type')

    setCurrentId(id)
    setCurrentType(type)

    if (type === 'edit') {
      getDetailsInfo(id)
    }
  }, [])

  // 获取详情
  const getDetailsInfo = async id => {
    const res = await GetMerchantInfo({ id })
    if (res) {
      let data = res
      addAndEditFormRef.setFieldsValue({
        ...data,
        company_address: [data.company_province, data.company_city, data.company_area],
        sign_address: [data.province, data.city, data.area]
      })
    }
  }

  const handleSubmit = async values => {
    let params = {
      ...values,

      // 公司地址
      company_province: values.company_address[0],
      company_city: values.company_address[1],
      company_area: values.company_address[2],

      // 合同签署地址
      province: values.sign_address[0],
      city: values.sign_address[1],
      area: values.sign_address[2],
      sign_address: values.sign_address.join('')
    }

    delete params.company_address

    let res = null
    if (currentType === 'add') {
      res = await CreateSubShop(params)
    } else if (currentType === 'edit') {
      res = await UpdateSubShop({ ...params, id: currentId })
    }

    if (res) {
      message.success('操作成功')
    }
  }

  // 更改合同约定诉讼法院
  const handleChangeSignAddress = value => {
    addAndEditFormRef.setFieldsValue({
      court_name: value.join('') + '人民法院'
    })
  }

  return (
    <div className='sub_merchant_details'>
      <Form
        preserve={false}
        form={addAndEditFormRef}
        name='addAndEdit'
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 10 }}
        onFinish={values => handleSubmit(values)}
      >
        <Form.Item name='corporate_name' label='公司全称: ' rules={[{ required: true, message: '请输入企业名称' }]}>
          <Input placeholder='请输入企业名称' allowClear />
        </Form.Item>

        <FormUploadImg
          extra='用户展示在小程序前台的店铺头像，请选择3MB以内的正方形图片上传'
          required
          name='shop_head_portrait'
          label='店招图片'
        />

        <Form.Item name='is_display' label='店铺状态: ' rules={[{ required: true, message: '请选择店铺状态' }]}>
          <Radio.Group>
            <Radio value={1}>显示</Radio>
            <Radio value={2}>隐藏</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item name='shop_name' label='店铺名称: ' rules={[{ required: true, message: '请输入店铺名称' }]}>
          <Input placeholder='请输入店铺名称' allowClear />
        </Form.Item>

        <Form.Item name='reg_no' label='营业执照号: ' rules={[{ required: true, message: '请输入营业执照号' }]}>
          <Input placeholder='请输入营业执照号' allowClear />
        </Form.Item>

        <Form.Item name='store_contact' label='联系人: ' rules={[{ required: true, message: '请输入联系人' }]}>
          <Input placeholder='请输入联系人' allowClear />
        </Form.Item>

        <Form.Item
          name='contact_tel'
          label='联系电话: '
          rules={[
            { required: true, message: '请输入联系电话' },
            { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确' }
          ]}
        >
          <Input placeholder='请输入联系电话' allowClear />
        </Form.Item>

        <Form.Item name='company_address' label='企业地址: ' rules={[{ required: true, message: '请选择企业地址' }]}>
          <Cascader options={CITY} placeholder='请选择企业地址' />
        </Form.Item>

        <Form.Item
          name='company_detail_address'
          label='详细地址: '
          rules={[{ required: true, message: '请选择详细地址' }]}
        >
          <Input placeholder='请选择详细地址' allowClear />
        </Form.Item>

        <Form.Item name='legal_person_name' label='法人姓名: ' rules={[{ required: true, message: '请输入法人姓名' }]}>
          <Input placeholder='请输入法人姓名' allowClear />
        </Form.Item>

        <Form.Item
          name='legal_person_id_num'
          label='法人身份证号: '
          rules={[{ required: true, message: '请输入法人身份证号' }]}
        >
          <Input placeholder='请输入法人身份证号' allowClear />
        </Form.Item>

        <FormUploadImg required name='license_pic' label='营业执照' />

        <FormUploadImg required name='legal_person_front_card_pic' label='法人身份证正面' />

        <FormUploadImg required name='legal_person_back_card_pic' label='法人身份证背面' />

        <Form.Item
          name='sign_address'
          label='合同默认签署地: '
          rules={[{ required: true, message: '请输入合同默认签署地' }]}
          tips='合同协议默认签署地'
        >
          <Cascader options={CITY} placeholder='请输入合同默认签署地' onChange={handleChangeSignAddress} />
        </Form.Item>

        <Form.Item
          name='court_name'
          label='合同约定诉讼法院: '
          rules={[{ required: true, message: '请选择合同约定诉讼法院' }]}
          tips='合同履行过程中发生争议，协商不成后的诉讼法院'
        >
          <Input placeholder='合同签署地选择后自动生成' allowClear disabled />
        </Form.Item>

        <Form.Item
          name='esign_seal_id'
          extra={
            <div>
              E签宝ID如何获取 :
              <a
                href='https://www.yuque.com/u33626086/bqgsnf/vuufibb99rrhyvfs?singleDoc# 《E签宝商家印章创建授权流程》'
                target='_blank'
                rel='noreferrer'
              >
                https://www.yuque.com/u33626086/bqgsnf/vuufibb99rrhyvfs?singleDoc# 《E签宝商家印章创建授权流程》
              </a>
            </div>
          }
          label='E签宝ID'
        >
          <Input placeholder='请输入E签宝ID' allowClear />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2 }}>
          <Popconfirm
            title='你确认提交吗？'
            onConfirm={() => addAndEditFormRef.submit()}
            okText='确认'
            cancelText='取消'
          >
            <Button type='primary'>提交</Button>
          </Popconfirm>
        </Form.Item>
      </Form>
    </div>
  )
}

export default SubMerchantDetails
